<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网上书店</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./style/login/base.css">
    <link rel="stylesheet" href="./style/login/normalize.css">
    <link rel="stylesheet" href="./style/login/index.css">
    <script type="text/javascript" src="./plugins/jQuery/jquery-3.6.0.js"></script>
    <script src="./plugins/vue/vue.js"></script>
    <script type="text/javascript" src="./plugins/axios/axios.js"></script>
    <script type="text/javascript" src="./js/request.js"></script>
    <link rel="stylesheet" href="./plugins/element-ui/index.css">
    <script src="./plugins/element-ui/index.js"></script>
</head>
<body>
<div id="app">
    <!-- 项部导航 -->
    <div class="xtx_topnav">
        <span class="span1" v-if="userset" @click="exit()">
          退出登录
        </span>
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li v-if="!userset">
                    <a href="./pages/login/register.html">免费注册</a>
                </li>
                <li v-if="!userset">
                    <a href="./pages/login/login.html">清先登录</a>
                </li>
                <li v-else>
                    <a href="">{{username}}</a>
                </li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li>
                    <a href="javascript:;">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;">在线客服</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="xtx_header clearfix">
        <div class="wrapper">
            <!-- 网站Logo -->
            <h1 class="xtx_logo"><a href="/">网上书店</a></h1>
            <!-- 主导航 -->
            <div class="xtx_navs">
                <ul class="clearfix">
                    <li v-for="(item,index) in menu">
                        <a @click="getmoreBook(item.name,item.id)">{{item.name}}</a>
                    </li>

                </ul>
            </div>
            <!-- 站内搜索 -->
            <div class="xtx_search clearfix">
                <!-- 购物车 -->
                <a @click="toLoginPage" href="./pages/cart/shoppingCart.html" class="xtx_search_cart sprites">
                    <i>{{gouwuCount}}</i>
                </a>
                <!-- 搜索框 -->
                <div class="xtx_search_wrapper">
                    <input type="text" placeholder="搜一搜" v-model="searchtext" @keyup.enter="SearchForContent()">
                </div>
            </div>
        </div>
    </div>
    <!-- 分类及焦点图 -->
    <div class="xtx_entry">
        <div class="wrapper">
            <!-- 分类 -->
            <div class="xtx_category">
                <!-- 顶级分类 -->
                <ul class="xtx_category_super">
                    <li v-for="(item,index) in menu">
                        <a style="text-align:center;" @click="getmoreBook(item.name,item.id)">{{item.name}}</a>
                        <i class="sprites"></i>
                    </li>
                </ul>
                <!-- 子分类 -->
                <div class="xtx_category_subset">
                </div>
            </div>
            <!-- 轮播图 -->

            <div class="xtx_banner">
                <ul>
                    <template>
                        <el-carousel trigger="click" :interval="5000" arrow="always" height="500px">
                            <el-carousel-item v-for="item in 4" :key="item">
                                <li>
                                    <a>
                                        <img :src="'images/desktop_' + item + '.jpg'" alt="">
                                    </a>
                                </li>
                            </el-carousel-item>
                        </el-carousel>
                    </template>
                </ul>
            </div>
        </div>
    </div>
    <!-- 新鲜好书 -->
    <div class="xtx_goods_new xtx_panel">
        <div class="wrapper">
            <!-- 面板头部 -->
            <div class="xtx_panel_header">
                <h3>新鲜好书<small>书单推荐 品质靠谱</small></h3>
                <a style="cursor: pointer;" class="more" @click="getmoreBook('新鲜好书')">
                    查看全部<i class="sprites"></i>
                </a>
            </div>
            <!-- 书名列表 -->
            <div class="xtx_panel_goods_1">
                <!-- v-for 循环渲染新书推荐 -->
                <a href="javascript:;" v-for="item in goodBooks">
                    <img :src=`http:${item.imageName}` alt="">
                    <p class="name">{{item.name}}</p>
                    <span class="name1">
              {{item.author}}&nbsp;&nbsp;&nbsp;&nbsp;
              <span class="name2">{{item.publisher}}</span>
            </span>
                    <span class="price"><small>￥</small>{{item.price}}</span>
                </a>
            </div>
        </div>
    </div>
    <!--低价专区 -->
    <div class="xtx_goods_seckill xtx_panel">
        <div class="wrapper clearfix">
            <!-- 面板头部 -->
            <div class="xtx_panel_header">
                <h3>低价专区<small>每日精品 限时低价</small></h3>
                <a href="javascript:;" class="more">
                    查看全部<i class="sprites"></i>
                </a>
            </div>
            <!-- 倒计时 -->
            <div class="countdown">
                <p class="next">下一场 8:00开始</p>
                <p class="title">书城限时抢购</p>
                <p class="tips">18:00<small>点场 倒计时</small></p>
                <p class="clock">
                    <span>00</span>
                    <i>:</i>
                    <span>25</span>
                    <i>:</i>
                    <span>20</span>
                </p>
            </div>
            <!-- 商品列表 -->
            <ul class="xtx_goods">
                <li v-for="item in lowPriceBooks">
                    <a href="javascript:;">
                        <div class="img-box">
                            <img :src="item.imageName">
                        </div>
                        <p class="name"
                           style="width: 80%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 20px auto">
                            {{item.name}}</p>

                        <p class="price" style="color: red">
                            <span><small>￥</small>{{item.price}}</span>
                            <span style="text-decoration: line-through"><small>￥</small>{{item.price + 20}}</span>
                        </p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 公共底部 -->
    <div class="xtx_footer">
        <div class="wrapper">
            <!-- 联系我们 -->
            <div class="contact clearfix">
                <dl>
                    <dt>客户服务</dt>
                    <dd class="chat">在线客服</dd>
                    <dd class="feedback">问题反馈</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd class="weixin">公众号</dd>
                    <dd class="weibo">微博</dd>
                </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="./uploads/qrcode.jpg">
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        400-0000-000
                        <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 其它 -->
        <div class="extra">
            <div class="wrapper">
                <!-- 口号 -->
                <div class="slogan">
                    <a href="javascript:;" class="price">价格亲民</a>
                    <a href="javascript:;" class="express">品质保障</a>
                    <a href="javascript:;" class="quality">物流快捷</a>
                </div>
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    // 取消vue的开发提示
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#app",
        data: {
            username: "",   //用户名显示
            userset: false,         //用户是否登录
            menu: [], //菜单显示
            gouwuCount: 0, //购物车图标显示数量
            goodBooks: [],   //新鲜好书
            searchtext: "",  //搜索的内容
            lowPriceBooks: []
        },
        methods: {
            // 判断是否登录，若登录则跳转去购物车页面，若没有登录则跳转去登录页面
            toLoginPage(event) {
                if (!this.userset) {
                    event.preventDefault();
                    this.$confirm('您还未登录是否前往登录页面?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 跳转到登录页面
                        location.href = "/front/pages/login/login.html"
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            duration: 1000,
                            message: '已取消操作',
                            showClose: true,
                        });
                    });
                }
            },
            // 获取所有的图书分类
            getmenu() {
                axios({
                    method: "GET",
                    url: "/category/list",
                }).then(res => {
                    if (String(res.data.code) === '1') {
                        this.menu = res.data.data
                    } else {
                        layer.msg(res.data.msg, {
                            icon: 2,
                            offset: 't',
                            anim: 6
                        });
                    }
                })
            },

            // 获取 新鲜好书   列表信息
            FreshAndGoodbooks() {
                axios({
                    method: "GET",
                    url: "/book/page/1/5",
                    params: {
                        type: "new"
                    }
                }).then(res => {
                    if (String(res.data.code) === '1') {
                        this.goodBooks = res.data.data.records
                    } else {
                        layer.msg(res.data.msg, {
                            icon: 2,
                            offset: 't',
                            anim: 6
                        });
                    }
                })
            },
            // 退出登录
            exit() {
                axios({
                    method: "GET",
                    url: "/user/logout",
                }).then(res => {
                    if (String(res.data.code) === '1') {
                        localStorage.clear();
                        this.userset = false;
                        this.username = "请先登录";
                        this.$message({
                            message: '退出成功！',
                            type: 'success'
                        });
                    } else {
                        layer.msg(res.data.msg, {
                            icon: 2,
                            offset: 't',
                            anim: 6
                        });
                    }
                })
            },
            //获取更多(的新鲜好书
            getCartItemLength() {
                axios.get("/user/isLogin?randomNum=" + Math.random()).then(res => {
                    if (String(res.data.code) === "1") {
                        this.userset = true;
                        this.username = JSON.parse(localStorage.getItem("userInfo")).username;
                        let userInfo = localStorage.getItem("userInfo");
                        axios({
                            method: "GET",
                            url: "/cart/list?id=" + JSON.parse(userInfo).id,
                            params: {
                                random: Math.random()
                            }
                        }).then(res => {
                            this.gouwuCount = res.data.data.length
                        })
                    } else {
                        this.gouwuCount = 0
                        localStorage.clear();
                    }
                });
            },
            getmoreBook(name, id) {
                localStorage.setItem("book", name);
                location.href = "./pages/more/more.html?id=" + id;
            },
            //搜索作者以及书名
            SearchForContent() {
                if (this.searchtext === '' || this.searchtext === ' ') {
                    this.$message({
                        message: "输入的内容不能为空",
                        type: 'warning',
                        duration: 1000
                    });
                } else {
                    localStorage.setItem("book", this.searchtext);
                    location.href = "./pages/more/more.html?id=" + this.searchtext;
                }
            },
            getLowPriceBooks() {
                axios({
                    method: "GET",
                    url: "/book/page/1/4",
                    params: {
                        type: "low"
                    }
                }).then(res => {
                    if (String(res.data.code) === '1') {
                        this.lowPriceBooks = res.data.data.records
                    } else {
                        layer.msg(res.data.msg, {
                            icon: 2,
                            offset: 't',
                            anim: 6
                        });
                    }
                })
            }
        },

        created() {
            this.getCartItemLength();  // 获取购物车列表长度
            this.getmenu();      // 获取菜单
            this.FreshAndGoodbooks();// 获取新鲜好书
            this.getLowPriceBooks();  // 获取低价图书
        },
    });
</script>
<script src="plugins/element-ui/index.js"></script>
</html>